import React, { useState,useEffect } from 'react';
import { Table, Modal } from 'antd';
import './index.scss'
import order from '../../../store/YeGuoPing/order'
import { useObserver } from 'mobx-react-lite'
import {observer} from 'mobx-react'

export default observer(function Commodityform() {
    const [quZhong, setquZhong] = useState('')
    const [miChen, setmiChen] = useState('')
    const [key, setKey] = useState('')
    useEffect(()=>{
        order.commodity()
    },[])
    //添加按钮
    const [isModalOpen3, setIsModalOpen3] = useState(false);
    //    编辑
    const compile = (a, b, c) => {
        setIsModalOpen3(true);
        setKey(b.id)
        setquZhong(b.weight)
        setmiChen(b.categoryName)
    };
    const leiMu = (e) => {
        setmiChen(e.target.value)
    }
    const quanZhong = (e) => {
        setquZhong(e.target.value)
    }
    // 确定
    const handleOk3 = () => {
        setIsModalOpen3(false);
        order.compileData(key, miChen, quZhong)
    };
    // 取消
    const handleCancel3 = () => {
        setIsModalOpen3(false);

    };
    const columns = [
        {
            key:'id',
            title: '类目名称',
            dataIndex: 'categoryName',
        },
        {
            key:'id',
            title: '权重',
            dataIndex: 'weight',
            align: 'center',
        },
        {
            key:'id',
            title: '操作',
            dataIndex: 'done',
            align: 'center',
            render: (a, b, c) => <span onClick={() => compile(a, b, c)} style={{ color: 'blue', cursor: 'pointer' }}>编辑</span>,
        },
    ];
    // rowSelection object indicates the need for row selection

    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows:', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    const [selectionType] = useState('checkbox');
    return useObserver(()=> (
        <div>
            <div>
                <Table
                    rowSelection={{ type: selectionType, ...rowSelection }}
                    columns={columns}
                    dataSource={order.tashop}
                    // pagination={{ defaultPageSize: 5 }}
                />
            </div>
            <div>
                {/* 添加 */}
                <Modal
                    className='Modaltext'
                    title="添加类目"
                    open={isModalOpen3}
                    onOk={handleOk3}
                    onCancel={handleCancel3}
                    getContainer={false}
                    okText="确认"
                    cancelText="取消"
                >
                    <div className='wenBen'>
                        <div>
                            <span>类目名称</span>
                            <input onChange={leiMu} value={miChen}></input>
                        </div>
                    </div>
                    <div className='wenben'>
                        <div>
                            <span>权重</span>
                            <input onChange={quanZhong} value={quZhong}></input>
                        </div>
                    </div>
                </Modal>
            </div>
        </div>
    ))
})
